<template>
  <div class="form-wrapper">
    <!--<router-view></router-view>-->
    <!--<router-link to="/shopcar" tag="button">dianji</router-link>-->
    <div class="header">
      <p>login</p>
    </div>
    <div class="input-wrapper">
      <div class="border-wrapper">
        <input id="myname" type="text" name="username" placeholder="username" class="border-item">
      </div>
      <div class="border-wrapper">
        <input id="mypwd" type="password" name="password" placeholder="password" class="border-item">
      </div>
    </div>
    <div class="action">
      <div class="btnusr" @click="login_as_usr">用户登录</div>
      <br>
      <div class="btnadmin" @click="login_as_admin">管理员登录</div>

    </div>


  </div>
</template>

<script>

    export default {
        name: "login.vue",
        mounted(){
          alert('欢迎');
        },
        /*events:"click",*/
        methods:{
          login_as_admin() {
            let myy=document.getElementById("myname").value;
            alert(myy);
            this.$router.history.replace('/admin')
          },
          login_as_usr() {
            let myy=document.getElementById("myname").value;

            alert(myy);
            this.$router.history.replace('/home')

          },
        }

    }
</script>

<style scoped>
  *{
    padding: 0;
    margin: 0;
  }

  html{
    height: 100%;
  }

  template{
    height: 100%;
    font-family: 'JetBrains Mono';
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: blue;
  }

  .form-wrapper{
    width: 1000px;
    background-color: #414562;
    color: #ffffff;
    border-radius: 2px;
    padding: 50px;
    position: center;

  }

  .form-wrapper .header{
    text-align: center;
    font-size: 35px;
    text-transform: uppercase;
    line-height: 100px;
  }

  .form-wrapper .input-wrapper input{
    background-color: #4cd964;
    border: 0;
    width: 100%;
    text-align: center;
    font-size: 15px;
    color: white;
    outline:none;
  }

  .form-wrapper .input-wrapper input::placeholder{
    text-transform: uppercase;
  }

/*  .form-wrapper .input-wrapper .border-wrapper{
    background-image: linear-gradient(to right,blue,orange);
    width: 100%;
    height: 80px;
    margin-bottom: 10px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .form-wrapper .input-wrapper .border-wrapper .border-item{
    height: calc(100% - 4px);
    width: calc(100% - 4px);
    border-radius: 30px;
  }*/

  .form-wrapper .input-wrapper .border-wrapper .border-item{
    width: 100%;
    text-transform: uppercase;
    border: 2px solid red;
    text-align: center;
    line-height: 80px;
    border-radius: 30px;
    cursor: pointer;
    transition: .2s;
  }

  .form-wrapper .action{
    display: flex;
    justify-content: center;
  }

  .form-wrapper .action .btnusr{
    width: 60%;
    text-transform: uppercase;
    border: 2px solid deepskyblue;
    text-align: center;
    line-height: 50px;
    border-radius: 30px;
    cursor: pointer;
    transition: .2s;
  }

  .form-wrapper .action .btnusr:hover{
    background-color: deepskyblue;
  }

  .form-wrapper .action .btnadmin{
    width: 60%;
    text-transform: uppercase;
    border: 2px solid deepskyblue;
    text-align: center;
    line-height: 50px;
    border-radius: 30px;
    cursor: pointer;
    transition: .2s;
  }

  .form-wrapper .action .btnadmin:hover{
    background-color: deepskyblue;
  }

</style>
